<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
	var db = openDatabase("EmployeeDB", " ", "Employee Database", 1024 * 1024);
	db.transaction(function(tx) {
		tx.executeSql("create table if not exists Employee("
				+ " employee_id integer primary key autoincrement,"
				+ " name, age integer)");
	});
	function load()
	{
		db.transaction(function(tx)
				{	
		tx.executeSql("select * from Employee",[],function(tx, rs)
				{
	var list = document.getElementById("list");
	list.innerHTML ="";
	var rows = rs.rows;
	for (var i =0;i <rows.length; i++)
		{
		var row = rows.item(i);
	    var option = new Option
	    (
	    row.employee_id + "\t" + row.name + "\t (" + row.age +"세)",
	    row.employee_id
	    );
	    list.options[list.options.length]= option;
			}
	});
	});
				}
	function  add(){
		var name =document.getElementById("name").value;
		var age =document.getElementById("age").value;
		db.transaction(function(tx)
				{
			tx.executeSql("insert into Employee (name,age) values(?,?)",
				[name,age],function(tx,rs)
				{
				alert("사원ID["+rs.insertld+"] 레코드가 저장되었습니다");
				load();
				}
				);
	});
	}
	function remove4()
	{
		var list = document.getElementById("list");
		if (list.selectedIndex<0)
			{
			return;
			}
		var selected= list.options[list.selectedIndex].value;
		db.transaction(function (tx)
				{
				tx.executeSql("delete from Employee where employee_id=?",
						[selected],
						function()
						{
					load();
						});
	});

	}		
</script>
<title>Insert title here</title>
</head>
<body onload="load()">
	<h1>사원 관리 화면</h1>

	이름:
	<input id="name" type="text"> 나이:
	<input id="age" type="text">

	<button onclick="add()">추가</button>
	<hr>
	<select id="list" size=5 style="width: 300px"></select>
	<button onclick="remove4()">삭제</button>

</body>
</html>